<template>
	<view class="check-code-content">
		<view class="content">
			<view class="title">
				请输入验证码
			</view>
			<view class="phone">
				验证码已发送至 +86 {{formatPhone}}
			</view>
			<u-code-input class="code-input" v-model="code" mode="line" space="50" :hairline="true" :maxlength="4"
				:focus="true" :bold="true" @finish="finish" @change="change"></u-code-input>
			<view class="count-down" v-if="reGetCode">
				<u-button text="重新获取" size="mini" type="warning" :loading="loading" @click="reGetCodeClick"></u-button>
			</view>
			<view class="count-down" v-else>
				<u-count-down :time="countDown" format="ss" @finish="countDownFinish"></u-count-down><span>
					秒后重新获取验证码</span>
			</view>
		</view>
		<u-keyboard ref="uKeyboard" mode="number" :dotDisabled="true" :showTips="false" :showCancel="false"
			:showConfirm="false" :overlay="false" :show="uKeyboardShow" @change="valChange" @backspace="backspace">
		</u-keyboard>
		<u-toast ref="uToast"></u-toast>
		<u-overlay :show="overlayShow"></u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '', //手机号
				code: '', //验证码
				countDown: 10 * 1000, //倒计时
				reGetCode: false, // 重新获取显隐
				loading: false, //按钮loading
				uKeyboardShow: true, //键盘显隐
				overlayShow: false, //遮罩显隐
			}
		},
		mounted() {
			// 隐藏系统键盘
			setInterval(() => {
				uni.hideKeyboard();
			}, 10)
		},

		onLoad(option) {
			this.phone = option.phone
		},
		computed: {
			// 格式化手机号
			formatPhone() {
				return this.phone.substring(0, 3) + ' ' + this.phone.substring(3, 7) + ' ' + this.phone.substring(
					7, 11)
			}
		},
		watch: {
			code(newV, oldV) {
				console.log(newV);
				if (newV && newV.length === 4) {
					this.login()
				}
			}
		},
		methods: {
			// 倒计时结束
			countDownFinish() {
				this.reGetCode = true
			},

			// 退格键被点击 // 删除value的最后一个字符
			backspace() {
				if (this.code.length) this.code = this.code.substr(0, this.code.length - 1);
			},

			// 将每次按键的值拼接到value变量中，注意+=写法
			valChange(val) {
				this.code += val;
			},

			// 重新获取
			reGetCodeClick() {
				this.loading = true

				setTimeout(() => {
					this.loading = false
					this.reGetCode = false
					this.$refs.uToast.show({
						message: "验证码已发送，请查收",
					})
				}, 1000)
			},

			// 验证登录
			login() {
				const params = {
					phone: this.phone,
					code: this.code
				}
				this.uKeyboardShow = false
				this.overlayShow = true

				this.$refs.uToast.show({
					message: "登录成功",
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '../index/index'
					})
				}, 1000)
			},


			change(e) {
				console.log(e)
			},


			finish(e) {
				console.log(e)
				this.login()
			},

			// 导航-返回
			onClickBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.check-code-content {
		width: 100vw;
		height: calc(100vh - 44px);
		background: #F5f5f5;

		.content {
			width: 86%;
			margin: 0rpx auto;

			.title {
				font-family: "Times New Roman", Georgia, Serif;
				padding-top: 60px;
				font-size: 38rpx;
				letter-spacing: 4rpx;
				font-weight: 400;
			}

			.phone {
				margin-top: 30rpx;
				font-size: x-small;
			}

			.code-input {
				margin-top: 20rpx;
			}

			.count-down {
				display: flex;
				align-items: center;
				font-size: x-small;
				margin-top: 50rpx;
				float: left;

				span {
					margin-left: 4rpx;
				}
			}
		}

		/deep/ .u-count-down__text {
			font-size: x-small !important;
		}
	}
</style>
